<template>
  <view class="message-page">
    <!-- 自定义导航栏 -->
    <nav-bar title="消息中心" :show-back="true"></nav-bar>
    
    <!-- 消息分类 -->
    <view class="msg-menu">
      <view class="msg-item" @click="navigateTo('/pages/message/system')">
        <view class="msg-icon system-icon">
          <tn-icon name="bell" size="40" color="#ffffff"></tn-icon>
        </view>
        <view class="msg-info">
          <view class="msg-title">系统通知</view>
          <view class="msg-desc">系统公告、功能更新等重要通知</view>
        </view>
        <view class="msg-badge" v-if="systemCount > 0">{{ systemCount }}</view>
      </view>
      
      <view class="msg-item" @click="navigateTo('/pages/message/reward')">
        <view class="msg-icon reward-icon">
          <tn-icon name="wallet" size="40" color="#ffffff"></tn-icon>
        </view>
        <view class="msg-info">
          <view class="msg-title">赏金通知</view>
          <view class="msg-desc">赏金任务状态变更、接单等通知</view>
        </view>
        <view class="msg-badge" v-if="rewardCount > 0">{{ rewardCount }}</view>
      </view>
      
      <view class="msg-item" @click="navigateTo('/pages/message/idle')">
        <view class="msg-icon idle-icon">
          <tn-icon name="tag" size="40" color="#ffffff"></tn-icon>
        </view>
        <view class="msg-info">
          <view class="msg-title">闲置通知</view>
          <view class="msg-desc">闲置商品留言、交易等通知</view>
        </view>
        <view class="msg-badge" v-if="idleCount > 0">{{ idleCount }}</view>
      </view>
      
      <view class="msg-item" @click="navigateTo('/pages/message/chat')">
        <view class="msg-icon chat-icon">
          <tn-icon name="comment" size="40" color="#ffffff"></tn-icon>
        </view>
        <view class="msg-info">
          <view class="msg-title">用户私信</view>
          <view class="msg-desc">用户之间的私聊消息</view>
        </view>
        <view class="msg-badge" v-if="chatCount > 0">{{ chatCount }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';

// 消息数量
const systemCount = ref(3);
const rewardCount = ref(2);
const idleCount = ref(5);
const chatCount = ref(8);

// 页面导航
const navigateTo = (url) => {
  uni.navigateTo({
    url
  });
};

onMounted(() => {
  // 获取消息数量
  // 实际项目中应该调用API
});
</script>

<style lang="scss" scoped>
.message-page {
  min-height: 100vh;
  padding: 30rpx;
  padding-top: 0;
  background-color: #f8f8f8;
}

.msg-menu {
  margin-top: 20rpx;
}

.msg-item {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .msg-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    
    &.system-icon {
      background-color: #FF9800;
    }
    
    &.reward-icon {
      background-color: #BA68C8;
    }
    
    &.idle-icon {
      background-color: #32C5FF;
    }
    
    &.chat-icon {
      background-color: #76FF03;
    }
  }
  
  .msg-info {
    flex: 1;
    
    .msg-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
    }
    
    .msg-desc {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .msg-badge {
    background-color: #FF5252;
    color: #ffffff;
    font-size: 24rpx;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style> 